import React,{
    useImperativeHandle,
    useRef,
    useEffect,
    useState
} from "react";
const Child = (props,parentRef)=>{
    const ipt = useRef();
    useImperativeHandle(parentRef,()=>{
        return{
            name:'dyj',
            changeIpt:(res)=>{
                console.log(res)
                ipt.current.focus();
            }
        }
    })
    return (
        <div>
            <input ref={ipt} type="text"/>
        </div>
    )
}
const ForwarRef = React.forwardRef(Child);
const Parent = ()=>{
    const iptRef = useRef();
    const [num,setNum] = useState(1);

    useEffect(()=>{
        const changeNum = () =>{
            setNum((num)=>{
                return num +1;
            })
        }



        document.getElementById('click').addEventListener('click',changeNum)

        return () => {
            document.getElementById('click').removeEventListener('click',changeNum)
            console.log("我丢！")
        }

    },[num])

    const handleIpt = ()=>{
        console.log(iptRef.current.changeIpt('aaa'));
    }
    return(
        <div>
            <ForwarRef ref={iptRef}  />
            <button onClick={handleIpt}>点我！</button>
            <div id={'click'}>
                点我。。。
            </div>
            <div>
                {
                    num
                }
            </div>
        </div>
    )
}

export default Parent;